<template>
  <div class="full_screen">
    <div class="apply_page">
      <div class="container">
        <div class="apply_content">
          <div class="main_content">
            <div class="apply_content">
              <div class="apply_component">
                <p class="title">店铺信息</p>
                <el-form  @keyup.enter.native="dataFormSubmit()" status-icon>
                  <span>店铺名称:</span>
                  <el-form-item prop="storeName" style="display: inline-block;width:70%;">
                    <el-input v-model="storeName" placeholder="请输入店铺名称"></el-input>
                  </el-form-item>
                  <span>店铺类型:</span>
                  <el-form-item style="display: inline-block;width:80%;">
                    <el-select v-model="storeType" placeholder="请选择店铺类型" style="width:87%;" @change="selectTrigger(storeType)">
                      <el-option v-for="item in storeTypes" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                   <span>客服电话:</span>
                  <el-form-item prop="serverPhone" style="display: inline-block;width:70%;">
                    <el-input v-model="serverPhone" type="serverPhone" placeholder="请输入客服电话"></el-input>
                  </el-form-item>
                  <span>店铺负责人:</span>
                  <el-form-item prop="legal" style="display: inline-block;width:70%;">
                    <el-input v-model="legal" type="legal" placeholder="请输入店铺负责人姓名"></el-input>
                  </el-form-item>
                  <span>负责人电话:</span>
                  <el-form-item prop="legalPhone" style="display: inline-block;width:70%;">
                    <el-input v-model="legalPhone" type="legalPhone" placeholder="请输入店铺负责人电话"></el-input>
                  </el-form-item>
                  <span>店铺地址:</span>
                  <el-form-item style="display: inline-block;width:70%;">
                    <el-cascader
                          style="width:100%"
                          size="large"
                          ref="cascaderAddr"
                          :options="options"
                          v-model="storeAddress"
                          placeholder="请选择省份和城市"
                          @change="handleChange">
                    </el-cascader>
                  </el-form-item>
                   <span></span>
                  <el-form-item prop="storeAddressDetail" style="display: inline-block;width:70%;">
                    <el-input v-model="storeAddressDetail"  placeholder="请输入店铺详细地址"></el-input>
                  </el-form-item>
                  <div v-if="storeType >1">
                    <p class="title">主体信息</p>
                    <span v-if="storeType == 2">商户名称:</span>
                    <el-form-item prop="companyName" v-if="storeType == 2" style="display: inline-block;width:70%;">
                      <el-input v-model="companyName" placeholder="请输入商户名称"></el-input>
                    </el-form-item>
                    <span v-if="storeType == 3">公司名称:</span>
                    <el-form-item prop="companyName" v-if="storeType == 3" style="display: inline-block;width:70%;">
                      <el-input v-model="companyName" placeholder="请输入公司名称"></el-input>
                      <!-- <p>需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核审核成功后，企业名称不可修改</p> -->
                    </el-form-item>
                    <span v-if="storeType == 4">组织名称:</span>
                    <el-form-item prop="companyName" v-if="storeType == 4" style="display: inline-block;width:70%;">
                      <el-input v-model="companyName" placeholder="请输入组织名称"></el-input>
                      <!-- <p>需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核审核成功后，企业名称不可修改</p> -->
                    </el-form-item>
                    <span>营业执照编号:</span>
                    <el-form-item prop="companyCode" style="display: inline-block;width:70%;">

                      <el-input v-model="companyCode" placeholder="请输入营业执照编号"></el-input>
                    </el-form-item>
                    <span>公司注册地址省:</span>
                    <el-form-item style="display: inline-block;width:70%;">
                      <el-cascader
                            style="width:100%"
                            size="large"
                            :options="options1"
                            ref="cascaderAddr"
                            v-model="companyAddress"
                            placeholder="请选择省市区"
                            @change="handleChange1">
                      </el-cascader>
                    </el-form-item>
                    <span></span>
                    <el-form-item prop="companyAddressDetail" style="display: inline-block;width:70%;">
                      <el-input v-model="companyAddressDetail"  placeholder="请输入公司详细地址"></el-input>
                    </el-form-item>
                    <span>营业期限:</span>
                    <el-form-item style="display: inline-block;width:70%;">
                      <el-date-picker
                        style="width: 100%;"
                        v-model="companyTerm"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                    <span>营业执照照片:</span>
                    <el-form-item style="display: inline-block;width:70%;">
                      <div style="display: inline-block; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="companyLicenseImg"
                      		action="https://admin.koudaidj.com/game/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess1"
                      		>
                      		<img v-if="companyLicenseImg" :src="companyLicenseImg" class="avatar" style="width: 148px;height: 148px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                    </el-form-item>
                  </div>
                  <div>
                    <p class="title">经营者信息</p>
                    <span>经营者姓名:</span>
                    <el-form-item prop="storeHead" style="display: inline-block;width:70%;">
                      <el-input v-model="storeHead" placeholder="请输入经营者姓名"></el-input>
                    </el-form-item>
                    <span>证件类型:</span>
                    <el-form-item style="display: inline-block;width:80%;">
                      <el-select v-model="idCardType" placeholder="请选择证件类型" style="width:87%;" @change="selectTrigger(storeType)">
                        <el-option v-for="item in idCardTypes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <span>身份证号码:</span>
                    <el-form-item prop="idCardNumber" style="display: inline-block;width:70%;">
                      <el-input v-model="idCardNumber" placeholder="请输入身份证号码"></el-input>
                    </el-form-item>
                    <span>身份证有效期限:</span>
                    <el-form-item style="display: inline-block;width:70%;">
                      <el-date-picker
                          style="width:215px;"
                          v-model="idCardValidTimeStart"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="身份证有效期限起始时间">
                      </el-date-picker>
                      <el-date-picker
                          style="width:215px;margin-left:8px;"
                          v-model="idCardValidTimeEnd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="身份证有效期限截止时间">
                      </el-date-picker>
                    </el-form-item>
                    <span style="position: relative;top: -150px;">证件照片:</span>
                    <el-form-item style="display: inline-block;width:80%;">
                      <div style="display: inline-block; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="idCardImg1"
                      		action="https://admin.koudaidj.com/game/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess2"
                      		>
                      		<img v-if="idCardImg1" :src="idCardImg1" class="avatar" style="width: 148px;height: 148px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                      <div style="display: inline-block;margin-left:20%; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="idCardImg2"
                      		action="https://admin.koudaidj.com/game/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess3"
                      		>
                      		<img v-if="idCardImg2" :src="idCardImg2" class="avatar" style="width: 148px;height: 148px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                      <div><span style="text-align: center;margin-right: 20%;width: 148px;">正面</span> <span style="text-align: center;width: 148px;">国徽面</span></div>
                    </el-form-item>
                    <span style="position: relative;top: -150px;">手持证件照:</span>
                    <el-form-item prop="companyTerm" style="display: inline-block;width:80%;">
                      <div style="display: inline-block; width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
                      	<el-upload
                      		class="avatar-uploader"
                      		v-model="idCardImg3"
                      		action="https://admin.koudaidj.com/game/alioss/upload"
                      		:show-file-list="false"
                      		:on-success="handleAvatarSuccess4"
                      		>
                      		<img v-if="idCardImg3" :src="idCardImg3" class="avatar" style="width: 148px;height: 148px;"/>
                      		<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
                      	</el-upload>
                      </div>
                      <div><span style="width: 148px;text-align: center;">请务必上传高清图片</span></div>
                    </el-form-item>
                  </div>
                  <el-form-item style="text-align:center;">
                    <el-button class="login-btn-submit" style="margin-top:0px;width: 250px;height: 40px;" type="primary" @click="dataFormSubmit()">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
  export default {
    data () {
      return {
        storeName: '',
        serverPhone: '',
        legal: '',
        legalPhone:'',
        storeAddressDetail:'',
        companyName:'',
        companyCode:'',
        companyAddressDetail:'',
        storeHead:'',
        idCardNumber:'',
        options: provinceAndCityData,
        options1: regionData,
        storeAddress:[],
        storeAddressmain:'',
        storeAddressCity:'',
        storeAddressDistrict:'',
        companyAddress:[],
        companyAddressProvince:'',
        companyAddressCity:'',
        companyAddressDistrict:'',
        companyTerm:'',
        companyLicenseImg:'',
        idCardValidTimeStart:'',
        idCardValidTimeEnd:'',
        idCardImg1:'',
        idCardImg2:'',
        idCardImg3:'',
        storeType:'',
        storeTypes: [
             {
               value: 1,
               label: '个人'
             }, {
               value: 2,
               label: '个体工商户'
             }, {
               value: 3,
               label: '企业'
             }, {
               value: 4,
               label: '其他组织'
             },
          ],
          idCardType:'',
          idCardTypes: [
               {
                 value: 1,
                 label: '中国大陆居民身份证'
               }, {
                 value: 2,
                 label: '中国香港居民来往内地通行证'
               }, {
                 value: 3,
                 label: '中国澳门居民来往内地通行证'
               }, {
                 value: 4,
                 label: '中国台湾居民来往内地通行证'
               },{
                 value: 5,
                 label: '其他国家或地区居民护照'
               }
            ]
      }
    },
    created () {
    },
    methods: {
      handleChange (value) {
        console.log(value)
         value = this.$refs['cascaderAddr'].currentLabels
         this.storeAddressCity = value[0]
         this.storeAddressDistrict = value[1]
      },
      handleChange1 (value) {
         value = this.$refs['cascaderAddr'].currentLabels
         this.companyAddressProvince = value[0]
         this.companyAddressCity = value[1]
         this.companyAddressDistrict = value[2]
      },
      // 图片上传
      handleAvatarSuccess1(file,fileList) {
      	this.companyLicenseImg = file.data
      },
      handleAvatarSuccess2(file,fileList) {
      	this.idCardImg1 = file.data
      },
      handleAvatarSuccess3(file,fileList) {
      	this.idCardImg2 = file.data
      },
      handleAvatarSuccess4(file,fileList) {
      	this.idCardImg3 = file.data
      },
      selectTrigger(val){
        this.storeType = val
      },
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl2('/self/merchantApply/save'),
              method: 'post',
              data: this.$http.adornData({
                'storeName': this.storeName,
                'serverPhone':this.serverPhone,
                'legal': this.legal,
                'legalPhone': this.legalPhone,
                'storeAddressCity':this.storeAddressCity,
                'storeAddressDistrict': this.storeAddressDistrict,
                'storeAddressDetail': this.storeAddressDetail,
                'companyName': this.companyName,
                'companyCode': this.companyCode,
                'storeHead': this.storeHead,
                'idCardNumber': this.idCardNumber,
                'companyAddressProvince': this.companyAddressProvince,
                'companyAddressCity':this.companyAddressCity,
                'companyAddressDistrict':this.companyAddressDistrict,
                'companyAddressDetail': this.companyAddressDetail,
                'companyTerm': this.companyTerm,
                'companyLicenseImg': this.companyLicenseImg,
                'idCardValidTimeStart': this.idCardValidTimeStart,
                'idCardValidTimeEnd': this.idCardValidTimeEnd,
                'idCardImg1': this.idCardImg1,
                'idCardImg2': this.idCardImg2,
                'idCardImg3': this.idCardImg3,
                'storeType': this.storeType,
                'idCardType': this.idCardType,
              })
            }).then(({data}) => {
                if(data.status == 0){
                    this.$message({
                    message: '提交成功,我们已收到您的入驻申请，将会在1-3个工作日内审核完毕，审核结果将以短信形式发送至您的手机号',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                     this.$router.replace({ name: 'login'})
                    }
                  })
                }
            })
          }
        })
      },
      // 获取数据列表
      dataSelect () {
        let id = this.$route.query.id
        this.$http({
          url: this.$http.adornUrl2('/self/merchantApply/find'),
          method: 'get',
          params: this.$http.adornParams({
            'id':id,
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.storeName = returnData.storeName
          this.storeType = returnData.storeType
          this.serverPhone = returnData.serverPhone
          this.legal = returnData.legal
          this.legalPhone = returnData.legalPhone
          // this.storeAddress = returnData.storeAddress
          console.log(this.storeAddress)
          this.storeAddressDetail = returnData.storeAddressDetail
          this.companyName = returnData.companyName
          this.companyCode = returnData.companyCode
          // this.companyAddress = returnData.companyAddress
          this.companyAddressDetail = returnData.companyAddressDetail
          this.companyTerm = returnData.companyTerm
          this.companyLicenseImg = returnData.companyLicenseImg
          this.storeHead = returnData.storeHead
          this.idCardType = returnData.idCardType
          this.idCardNumber = returnData.idCardNumber
          this.idCardValidTimeStart = returnData.idCardValidTimeStart
          this.idCardValidTimeEnd = returnData.idCardValidTimeEnd
          this.idCardImg1 = returnData.idCardImg1
          this.idCardImg2 = returnData.idCardImg2
          this.idCardImg3 = returnData.idCardImg3
          this.storeType = returnData.storeType
        })
      }
    },
    mounted () {
      this.dataSelect()
    }
  }
</script>

<style scoped>
  .full_screen {
      background-color:#f7f7f7;
  }
  .apply_page .container{
    width: 55%;
    margin: 0 auto;
    padding: 40px 0;
  }
  .apply_page .container .apply_content {
      min-height: 500px;
      background: #fff;
      border-radius: 4px;
  }
  .apply_page .container .apply_content .main_content {
      padding: 30px 100px 30px;
  }
  .apply_component .title {
      font-size: 24px;
      color: #333;
      position: relative;
      margin: 30px 20px 20px;
  }
  .apply_component .title:before {
      content: "";
      display: block;
      position: absolute;
      top: 2px;
      left: -20px;
      width: 4px;
      height: 24px;
      background-color: #3a68f2;
  }
  .apply_page .container .apply_component span{display: inline-block;width:110px;text-align: right;}
  /* .apply_page .container .apply_component .el-input{width: 70%;} */
  .el-form-item__error {
      left:15%!important;
  }
</style>
